<template>
<div class="item">
  <div v-title data-title="商品详情"></div>
    <header-bar :head-title="headTitle" goBack="true"></header-bar>
    <swipe class="my-swipe">
      <swipe-item v-for="(items, index) in imgList" :key="index" v-bind:style="{backgroundImage:'url('+items+')'}"></swipe-item>
    </swipe>
    <!--介绍-->
    <div class="goods-info clear">
      <div class="price ">
        <span class="vip-tip">VIP</span>
        <span class="vip-price">￥{{goods.price}}888</span>
        <span class="sale-tip">火热促销</span>
        <div class="distinction"><img src="../../assets/fg.jpg"/>法国</div>
        <div class="clear"></div>
        <del class="market-price">平台价：￥{{goods.price}}888</del>
        <span>销量：9件</span>
        
      </div>
      <div class="goods-name">{{goods.goods_name}}【Dior】花漾甜心女士淡香水miss dior小姐淡香50ml 持久留香</div>
      <div class="share">
        <img src="../../assets/share.png"/>分享
      </div>
    </div>
    <div class="goods-info">
      <div class="profit">
        进口税预计<span>￥{{goods.price}}25.00</span>
      </div>
      <div class="profit" style="border:none;">
        佣金：<span>￥{{goods.price}}25.00</span>
        二级佣金：<span>￥{{goods.price}}15.00</span>
      </div>
    </div>
    <div class="goods-info" style="padding: .4rem 0 0 0;">
      <div class="goods-cell"  @click="couponShow = !couponShow;choice();">
        <div class="cell-left">
        <span class="span-tip">换购</span><span>该商品参与优惠换购活动</span>
        </div>
        <div class="cell-right">
          <img src="../../assets/more.png" />
        </div>
      </div>
      <div class="goods-cell" @click="couponShow = !couponShow;choice();">
        <div class="cell-left">
        <span class="span-tip">优惠</span><span>点击领取优惠券</span>
        </div>
        <div class="cell-right">
          <img src="../../assets/more.png" />
        </div>
      </div>
      <div class="bor-t" @click="bzShow = !bzShow;choice();">
        <div class="goods-cell">
        <div class="cell-left" style="padding-left:0;">
        <span> <img src="../../assets/yes.png" />全场包邮</span>
        <span><img src="../../assets/yes.png" />7天退换</span>
        <span><img src="../../assets/yes.png" />48小时发货</span>
        <span><img src="../../assets/yes.png" />假一罚十</span>
        </div>
        <div class="cell-right">
          <img src="../../assets/more.png" />
        </div>
        </div>
      </div>
    </div>
    <!--信息-->
    <div class="goods-info">
      <div class="bor-t" style="border:none;" @click="cpcsShow = !cpcsShow;choice();">
        <div class="goods-cell">
        <div class="cell-left" style="padding-left:0;">
          <b>产品参数</b>
        </div>
        <div class="cell-right">
          <img src="../../assets/more.png" />
        </div>
        </div>
      </div>
      <div class="bor-t" @click="choiceShow = !choiceShow;choice();">
        <div class="goods-cell">
        <div class="cell-left" style="padding-left:0;">
         <b >选择规格</b>
        </div>
        <div class="cell-right">
          <img src="../../assets/more.png" />
        </div>
        </div>
      </div>
    </div>
    <!--评价-->
      <goods-comment :comment="goods.comment"></goods-comment>
      <!--详情-->
    <div class="goods-img" >
      <div class="goods-img-title">商品详情</div>
      <img v-for="items in goods.introduction" :src="items.img" />
    </div>
    <div class="cart-bottom">
      <div class="cart-ico"><i class="icon iconfont icon-shouye"></i><span>首页</span></div>
      <div class="cart-ico act"><i class="icon iconfont icon-favorite"></i><span>收藏</span></div>
      <div class="cart-ico" @click="this.choiceShow = !this.choiceShow;choice();"><i class="icon iconfont icon-cart"></i><span>加入购物车</span></div>
      <div class="add-cart"><router-link to="/order">立即购买</router-link></div>
    </div>
<!--加入购物车 购买-->
    <transition name="fade">
      <div class="choice-model" v-if="choiceShow" @click="choiceShow = !choiceShow;close()"></div>
      <div class="choice-model" v-if="bzShow" @click="bzShow = !bzShow;close()"></div>
      <div class="choice-model" v-if="cpcsShow" @click="cpcsShow = !cpcsShow;close()"></div>
      <div class="choice-model" v-if="couponShow" @click="couponShow = !couponShow;close()"></div>
      
    </transition>

    <transition name="drop">
      <div class="cpcs" v-if="cpcsShow">
       <h2>产品参数</h2>
       <ul>
         <li><span>上市时间</span>2011年</li>
         <li><span>化妆品保质期</span>2011年</li>
         <li><span>上市时间</span>2011年</li>
         <li><span>上市时间</span>2011年</li>
       </ul>
       <div class="c-button" @click="cpcsShow = !cpcsShow;close()">确 定</div>
       </div>
       <div class="bz" v-if="bzShow">
       <h2>基础保障</h2>
       <div class="bz-item">
         <img src="../../assets/yes.png"/>
         <p>正品保证<span>改商品由中国人保承保正品保证险</span></p>
       </div>
       <div class="bz-item">
         <img src="../../assets/yes.png"/>
         <p>七天无理由退换<span>消费者在满足七天无理由退换货申请条件的前提下，可以提出“7天无理由退换货”的申请</span></p>
       </div>
       <div class="bz-item">
         <img src="../../assets/yes.png"/>
         <p>急速退货<span>预约后准时上门取件，急速退到账</span></p>
       </div>
       <div class="bz-item">
         <img src="../../assets/yes.png"/>
         <p>赠运费险<span>卖家为您购买的商品投保退货运费险</span></p>
       </div>
       <div class="c-button" @click="bzShow = !bzShow;close()">确 定</div>
       </div>
       <div class="yhq" v-if="couponShow">
       <h2>店铺优惠券</h2>

       <div class="coupon-item" @click="getCoupon">
           <div class="left-c">
             <div class="coupon-price">￥<span>20</span></div>
             <p>满300使用</p>
             <p>有效期2017.10.23-2017.10.31</p>
           </div>
           <div class="right-c">
             立即领取
           </div>
         </div>
         
       <div class="c-button" @click="couponShow = !couponShow;close()">确 定</div>
       </div>
      <div class="choice" v-if="choiceShow">
        <div class="choice-img">
          <img :src="specImg" alt=""/>
        </div>
        <div class="choice-p">
          <div>
            <div class="choice-p-price ">￥{{specPrice}}</div>
            <div class="del" @click="close">
              +
            </div>
          </div>
          <div>库存 {{specStock}} 件</div>
          <div>请选择分类</div>
        </div>
        <div class="choice-spec">
          <b>颜色分类</b>
          <div class="spec-box">
            <div class="spec" v-for="(item, index) in productSpec" @click="checkSpec(index)" :key='index' :class="index == checkIndex?'spec-checked':''">
              {{item.ShortName}}
            </div>

          </div>
        </div>
        <div class="choice-spec">
          <b>规格</b>
          <div class="spec-box">
            <div class="spec" v-for="(item, index) in productSpec" @click="checkSpec(index)" :key='index' :class="index == checkIndex?'spec-checked':''">
              {{item.ShortName}}
            </div>

          </div>
        </div>
        <div class="choice-num">
          <b>购买数量</b>
          <div>
            <span @click="changeNum(-1)">-</span>
            <input readonly="readonly" type="text" v-model="productNum">
            <span @click="changeNum(1)">+</span>
          </div>
        </div>

        <div class="choice-btn" @click="addCar">确定</div>
      </div>
    </transition>


  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import { Swipe, SwipeItem } from 'vue-swipe'
import goodsComment from './comment-c.vue'
import qs from 'qs'
export default {
  components: {
    goodsComment,
    HeaderBar,
    Swipe,
    SwipeItem
  },
  data () {
    return {
      headTitle: '商品',
      choiceShow: false,
      bzShow: false,
      cpcsShow: false,
      couponShow: false,
      productNum: 1,
      goods: '',
      imgList: [],
      productImg: [],
      productId: this.$route.query.productId
    }
  },
  created () {
    this.loadBottom()
  },
  methods: {
    getCoupon () {
      this.$toast('领取成功')
    },
    choice () {
      document.body.style.overflow = 'hidden';
    },
    close () {
      document.body.style.overflow = 'auto';
    },
    loadBottom () {
      var self = this
      this.loading = true
      this.$http.post(this.url + 'api/productDetailsData', qs.stringify({
        id: this.productId,
        code: this.code
      })
      )
        .then(function (response) {
          self.goods = response.data.data;
          self.imgList = self.imgList.concat(response.data.data.productImages);
          self.productImg = response.data.data.introduction;
          console.log(self.goods);
        })
        .catch(function (error) {
          self.$toast(error);
          console.log(error);
        });
    }
  }
}
</script>
<style lang="scss">
@import 'item.scss';
</style>


